<template>
  <view class="my-main">
    <image 
      style="width: 100%;height: 540rpx;position: absolute;z-index: -1;top: -40rpx;" 
      src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mineback.png"
      ></image>
    <view class="top-info">
      <view style="font-size: 28rpx;color: white;margin-top: 62rpx;line-height: 40rpx;">
        <view style="width:56rpx;display: inline-block;margin-left: 600rpx;">设置</view>
        <view style="margin-left: 15rpx;display: inline-block;">
          <image style="width: 43rpx;height: 40rpx;position: relative;top: 10rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/chilunlogo.png"></image>
        </view>
      </view>
      <view style="margin-top: 25rpx;">
        <view class="person-image">
          <image style="width: 100%;height: 100%;border: 100%;" :src="user.headimg"></image>
        </view>
        <view style="height: 140rpx;margin-left: 26rpx;">
          <view v-if="noLogin">
            <view style="height: 96rpx;">
              <image @click="login" style="width: 290rpx;height: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo5.png"></image>
            </view>
            <view style="font-size: 24rpx;color: white;letter-spacing: 2rpx;text-indent: 12rpx;line-height: 35rpx;margin-top: 10rpx;">点击登录，美好从此开始！</view>
          </view>
          <view v-else>
            <view style="display: flex;color: white;">
              <view class="nick-name">{{user.name}}</view>
              <!-- <view style="font-weight: 400;font-size: 28rpx;margin-left: 22rpx;">
                <view style="line-height: 28rpx;margin-top: 15rpx;">ID:889977</view>
                <view style="line-height: 28rpx;margin-top: 4rpx;max-width: 220rpx;white-space: nowrap;overflow: hidden;">杭州大锤修理厂12312312321</view>
              </view> -->
            </view>
            <view style="margin-top: 30rpx;display: flex;color: white;">
              <view>
                <image style="width: 50rpx;height: 50rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/minebianji.png"></image>
              </view>
              <view style="line-height: 50rpx;font-weight: 400;font-size: 28rpx;margin-left: 8rpx;">
                编辑个人资料
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="truck-repair-record">
        <view style="float: left;padding: 35rpx 50rpx;color: white;height: 40rpx;">
          <view style="font-size: 36rpx;font-weight: 500;">车辆维修记录</view>
          <!-- <view style="margin-top: 4rpx;font-size: 24rpx;line-height: 50rpx;">
            <image style="width: 40rpx;height: 40rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/minecarnumber.png"></image>
            <text style="position: relative;top: -13rpx;margin-left: 6rpx;">维修车辆台次：</text>
          </view> -->
        </view>
        <view style="float: right;margin-right: 60rpx;">
          <view style="margin-top: 35rpx;">
            <image 
              style="width: 60rpx;height: 60rpx;margin-left: 10rpx;" 
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/minemingpian.png"></image>
          </view>
          <view style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-top: -10rpx;">查看名片</view>
        </view>
      </view>
    </view>
    <view class="my">
      <view style="height: 80rpx;border-bottom: 2rpx solid rgba(220, 220, 220, 0.5);">
        <view style="float: left;">
          <image style="width: 56rpx;height: 56rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo9.png"></image>
        </view>
        <view style="float: left;line-height: 56rpx;font-size: 32rpx;color: rgba(51, 51, 51, 1);margin-left: 32rpx;">我的商户</view>
      </view>
      <view style="height: 70rpx;"></view>
    </view>
    <view style="padding: 15rpx;">
      <image v-if="user.type == 1" style="height: 200rpx;width: 720rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_14.png"></image>
      <image v-else style="height: 200rpx;width: 720rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_15.png"></image>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      // user:Object
    },
    data() {
      return {
        picker:0,
        noLogin:true,
        user:{}
      }
    },
    mounted() {
      console.log(uni.getStorageSync('user'))
      if(uni.getStorageSync('token').length > 0) {
        this.noLogin = false;
        this.user = uni.getStorageSync('user');
      }
    },
    methods: {
      pickIdentity:function(){
        
      },
      login:function() {
        this.$emit('toLogin')
      }
    }
  }
</script>

<style lang="css" scoped>
  .my-main {
    height: 100%;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .top-info {
    height: 500rpx;
    overflow: hidden;
  }
  .person-image {
    width: 140rpx;
    height: 140rpx;
    margin-right: 32rpx;
    float: right;
    border-radius: 140rpx;
    background-image: url('../../static/images/no_login.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .truck-repair-record {
    background-color: rgba(242, 138, 48, 1);
    height: 160rpx;
    width: 686rpx;
    margin-left: 32rpx;
    margin-top: 82rpx;
    border-radius: 26rpx 26rpx 0 0;
  }
  .my {
    width: 656rpx;
    /* height: 195rpx; */
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
    margin: 15rpx;
    padding: 24rpx 32rpx;
  }
  .nick-name {
    max-width: 500rpx;
    overflow: hidden;
    line-height: 85rpx;
    font-weight: 500;
    font-size: 60rpx;
    white-space: nowrap;
  }
</style>
